<template>
  <div class="home-wrap">
    <el-container class="home-in">
      <el-aside class="home-left">
        <div class="logo">
          <h1>hhhhhh</h1>
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#353b4e"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :router="true"
        >
          <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>内容管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/publish">发布文章</el-menu-item>
              <el-menu-item index="/artical">内容列表</el-menu-item>
              <el-menu-item index="/comment">评论列表</el-menu-item>
              <el-menu-item index="/material">素材管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-star-off"></i>
              <span>粉丝管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/textData">图文数据</el-menu-item>
              <el-menu-item index="/fans/fanscul">粉丝概况</el-menu-item>
              <el-menu-item index="/fans/fanimg">粉丝画像</el-menu-item>
              <el-menu-item index="/fans/fansfollow">粉丝列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="/mine">
            <i class="el-icon-user"></i>
            <span slot="title">账户信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="home-right">
        <el-container>
          <el-header class="right-top">
            <span>~~~~~~~~~</span>
            <div class="info">
              <img :src="$store.state.user.photo" />
              <span>{{$store.state.user.name}}</span>
              <el-dropdown @command="doUser">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="person">个人中心</el-dropdown-item>
                  <el-dropdown-item command="addr">github地址</el-dropdown-item>
                  <el-dropdown-item divided command="quite">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-header>
          <el-main class="right-main">
            <transition name="fade" mode="out-in">
              <router-view :key="$route.fullPath"></router-view>
            </transition>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {
    let res = JSON.parse(window.localStorage.getItem("userInfo"));
    // 把返回的用户信息存到vuex里
    if (res) {
      this.$store.commit("increment", res);
    }
  },

  methods: {
    doUser(val) {
      console.log(val);
      if (val == "addr") {
        window.open("https://github.com");
      } else if (val == "quite") {
        window.localStorage.removeItem("userInfo");
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.home-wrap {
  height: 100%;
  .home-in {
    height: 100%;
    overflow: hidden;
    .home-left {
      background-color: #323745;
      width: 240px !important;
      overflow: hidden;
      .logo {
        text-align: center;
        padding: 15px 10px;
        img {
          height: 30px;
        }
      }
      .el-menu-item {
        &:hover {
          background-color: #3296fa !important;
        }
      }
    }
    .home-right {
      padding: 0;
      // line-height: 60px;
      .right-top {
        // background-color: pink;
        .info {
          float: right;
          line-height: 60px;
          img {
            height: 30px;
            border-radius: 15px;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
        span {
          line-height: 60px;
        }
      }
      .right-main {
        // background-color: #f2f3f5;
        padding: 20px;
        height: 100%;
      }
    }
  }
}
</style>